<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="{{ title }}" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="{{ url }}" />
  <meta property="og:image" content="/assets/img/guides/{{ guide_name }}.png" />
  <meta name="twitter:title" content="{{ title }}">
  <meta name="twitter:image" content="https://gradio.app/assets/img/guides/{{ guide_name }}.png">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="icon" type="image/png" href="/assets/img/logo.png">
  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="/assets/prism.css">
  <style>
    html {
      font-size: 16px !important;
    }

    .prose {
      max-width: none !important;
    }

    .prose p>img {
      margin: 0 auto;
      width: 600px;
      max-width: 100%;
    }

    .gradio-page .content {
      padding: 0px !important;
    }

    .gradio-page .footer {
      display: none !important;
    }

    .prose .code,
    .prose pre {
      width: 95%;
      border-radius: 4px 0 0 4px;
      color: black;
      background: rgb(249, 250, 251);
    }

    h3 a {
      display: inline-block;
    }

    .prose h1 {
      font-weight: 600;
    }

    .anchor-img {
      margin: 0 0 0 5px !important;
    }

    .anchor {
      visibility: hidden;
    }

    .header:hover .anchor {
      visibility: visible;
    }

    .copy {
      padding-right: 1em;
      background: #f9fafb;
    }

    .copy-svg {
      visibility: hidden;
      margin: 1em 0 0 0 !important;
      width: 20px;
    }

    .code-block:hover .copy-svg {
       visibility: visible;
    }

    ol {
      list-style: auto;
      padding-inline-start: 40px;
      list-style-type: none;
    }

    table {
      margin: auto;
    }

     th {
      background: #ccc;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 10px;
    }

  </style>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-156449732-1');
  </script>
</head>

<body class="bg-white text-gray-900 text-md sm:text-lg">
  {{navbar_html|safe}}
  <div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template">
    <div class="prose mt-6 mb-6">
      <h1 id="{{guide_name}}" class="header">{{title}}</h1>
      {% if contributor is not none %}
      <p>Contributed by {{contributor}}</p>
      {% endif %}
    </div>

    {% if spaces is not none %}
    <div id='spaces-holder'>
      <a href='https://hf.co/spaces' target='_blank'>
        <img class="inline-block my-0 mx-auto w-5 max-w-full pb-1" src='/assets/img/spaces-logo.svg'>
      </a>
      <p class="m-0 inline text-lg font-normal">Related Spaces: </p>

      {% for space in spaces %}
      <div class='space-link inline-block m-1 px-1 rounded-md'>
        <a href='{{space}}' target='_blank' class="no-underline">{{space[30:]}}</a>
      </div>
      {% endfor %}
      </div>
   {% endif %}

    <div class="prose mt-6 mb-6">
      {{ template_html|safe }}
    </div>
  </div>
  <footer class="container mx-auto p-4 flex justify-between items-center">
    <img src="/assets/img/logo.svg" class="h-10">
    <div class="flex gap-4">
      <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
        <img src="/assets/img/twitter.svg" class="h-8">
      </a>
      <a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio">
        <img src="/assets/img/github.svg" class="h-8">
      </a>
    </div>
  </footer>
  <script src="/assets/prism.js"></script>
  <script>
    window.gradio_mode = "website";
  </script>
  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
  <script>
    var demo_endpoint = "/demo";
    var demo_names = {{ demo_names| tojson }};
    document.querySelector("#gradio-library").addEventListener('load', function () {
      demo_names.forEach((demo_name, i) => {
        fetch('/demo/' + demo_name + '/config')
          .then(response => response.json())
          .then(demo => {
            demo.root = demo_endpoint + "/" + demo_name + "/";
            launchGradio(demo, "#interface_" + demo_name);
          });
      });
    });
    function createAnchorTag(link) {
            let a = document.createElement('a');
            a.href = link;
            a.classList.add("anchor");
            let img = document.createElement('img');
            img.classList.add("anchor-img", "w-7", "max-w-full", "inline-block", "mr-0", "ml-1")
            img.src = "/assets/img/anchor.svg";
            a.appendChild(img);
            return a;
        }
    var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
    for (let i = 0; i < headers.length; i++) {
      headers[i].classList.add("header");
      let link = '#' + headers[i].id;
      headers[i].appendChild(createAnchorTag(link))
    }

    function copyCode(elem) {
        var text = elem.parentElement.innerText;
        navigator.clipboard.writeText(text);
        elem.firstChild.src = "/assets/img/copy-orange.svg"
        setTimeout(function(){
          elem.firstChild.src = "/assets/img/copy-grey.svg"
        }, 600);
    };

    var spacesHolder, spaces;
    spacesHolder = document.getElementById("spaces-holder");
    spaces = spacesHolder.getElementsByTagName('div');

    var backgrounds = ['rgba(255,254,188,0.3)',
                       'rgba(255,205,188,0.3)',
                       'rgba(255,188,188,0.3)',
                       'rgba(194,255,169,0.3)',
                       'rgba(169,255,237,0.3)',
                       'rgba(182,169,255,0.3)',
                       'rgba(255,183,245,0.3)']

    function shuffleBackgrounds(array) {
      for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
      }
    }

    shuffleBackgrounds(backgrounds);

    color_counter = 0
    for (let i = 0; i < spaces.length; i++) {
      spaces[i].style.background = backgrounds[color_counter];
      color_counter += 1
      if (color_counter == backgrounds.length) {
        color_counter = 0;
      }
    }

  </script>

</body>

</html>
